<template>
	<div class="product-type-list">
		<view class="control">
			<uni-segmented-control class="nav-bar" :current="current" :values="items" @clickItem="onClickItem"
				styleType="text" activeColor="#007aff"></uni-segmented-control>
			<view class="content">
				<view v-show="current === 0">
					<div class='list' v-if="deviceTypeEntities">
						<div class='item' v-for="(deviceType, index) in deviceTypeEntities" :key="index">
							<div class='top'>
								<div class='number-box line'>{{deviceType.typeName}}</div>
							</div>
							<div class='createTime'>
								<text class="iconfont icon-rili"></text>创建时间：
								<uni-dateformat :date="deviceType.createTime" format='yyyy-MM-dd hh:mm:ss'>
								</uni-dateformat>
							</div>
						</div>
					</div>
					<uni-load-more iconType="circle" v-if="deviceTypeEntities.length" :status="loadingStatus">
					</uni-load-more>
					<o-empty v-else bg="#f3f3f3"></o-empty>
				</view>
				<view v-show="current === 1">
					<div class='list' v-if="partTypeEntities">
						<div class='item' v-for="(partType, index) in partTypeEntities" :key="index">
							<div class='top'>
								<div class='number-box line'>{{partType.typeName}}</div>
							</div>
							<div class='createTime'>
								<text class="iconfont icon-rili"></text>创建时间：
								<uni-dateformat :date="partType.createTime" format='yyyy-MM-dd hh:mm:ss'>
								</uni-dateformat>
							</div>
						</div>
					</div>
					<uni-load-more iconType="circle" v-if="partTypeEntities.length" :status="loadingStatus">
					</uni-load-more>
					<o-empty v-else bg="#f3f3f3"></o-empty>
				</view>
			</view>
		</view>
		<view>
			<!-- 输入框示例 -->
			<uni-popup ref="inputDialog" type="dialog">
				<uni-popup-dialog ref="inputClose" mode="input" :title="current==0?'新增设备类型' : '新增部件类型'" 
					:placeholder="current==0?'请输入增设备类型' : '请输入增部件类型'"
					@confirm="dialogInputConfirm"></uni-popup-dialog>
			</uni-popup>
		</view>
	</div>
</template>

<script>
	import {
		api,
		post
	} from '@/util/api.js'
	export default {
		data() {
			return {
				items: ['设备类型', '部件类型'],
				current: 0,
				deviceTypeEntities: [],
				deviceCount: 0,
				devicePage: 1,
				limit: 10,
				partTypeEntities: [],
				partTypeCount: 0,
				partPage: 1,
				loadingStatus: 'more'
			}
		},
		created() {
			this.current == 0 ? this.queryDeviceList() : this.queryPartList()
		},
		beforeMount() {
			uni.$on('onReachBottomType', () => { // 监听上拉加载
				if (this.current == 0) {
					this.onReachType()
				} else if (this.current == 1) {
					this.onReachPart()
				}
			})
			uni.$on('onPullDownRefreshType', () => { // 监听下拉刷新
				if (this.current == 0) {
					this.deviceTypeEntities = []
					this.devicePage = 1
					post(api.DeviceTypeEntities, {
						page: this.devicePage,
						limit: this.limit
					}).then(res => {
						this.deviceTypeEntities = res.data
						this.count = res.count
					})
				} else if (this.current == 1) {
					this.partTypeEntities = []
					this.partPage = 1
					post(api.PartTypeEntities, {
						page: this.partPage,
						limit: this.limit
					}).then(res => {
						this.partTypeEntities = res.data
						this.count = res.count
					})
				}
				uni.stopPullDownRefresh()
			})
			uni.$on('addProductType', () => {
				this.addProductType()
			})
		},
		destroyed() {
			uni.$off('onReachBottomType') // 销毁onReachBottom监听
			uni.$off('onPullDownRefreshType') // 销毁onPullDownRefresh
			uni.$off('addProductType')
		},
		methods: {
			resetData() {
				this.partTypeCount = 0
				this.partPage = 1
				this.devicePage = 1
				this.deviceCount = 0
				this.deviceTypeEntities = []
				this.partTypeEntities = []
			},
			onClickItem(e) {
				if (this.current != e.currentIndex) {
					this.current = e.currentIndex;
					this.resetData()
				}
				e.currentIndex == 0 ? this.queryDeviceList() : this.queryPartList()
			},
			// 设备类型列表
			async queryDeviceList() {
				let deviceType = {
					page: this.devicePage,
					limit: this.limit
				}
				let res = await post(api.DeviceTypeEntities, deviceType)
				this.deviceCount = res.count
				this.loadingStatus = "more"
				this.deviceTypeEntities = [...this.deviceTypeEntities, ...res.data]
			},
			// 零部件类型列表
			async queryPartList() {
				let deviceType = {
					page: this.partPage,
					limit: this.limit
				}
				let res = await post(api.PartTypeEntities, deviceType)
				this.partTypeCount = res.count
				this.loadingStatus = "more"
				this.partTypeEntities = [...this.partTypeEntities, ...res.data]
			},
			//上拉刷新处理
			async onReachType() {
				if (this.deviceTypeEntities.length >= this.deviceCount) {
					return (this.loadingStatus = "no-more")
				}
				this.devicePage++
				this.loadingStatus = "loading"
				await new Promise((resolve) => setTimeout(resolve, 300))
				await this.queryDeviceList()
			},
			async onReachPart() {
				if (this.partTypeEntities.length >= this.partTypeCount) {
					return (this.loadingStatus = "no-more")
				}
				this.partPage++
				this.loadingStatus = "loading"
				await new Promise((resolve) => setTimeout(resolve, 300))
				await this.queryPartList()
			},
			// 添加产品类型
			addProductType() {
				this.$refs.inputDialog.open()
			},
			// 保存产品类型
			dialogInputConfirm(val) {
				if (val == undefined || val == '') {
					return uni.showToast({
						icon: 'error',
						title: '类型不能为空'
					})
				}
				let url = this.current == 0 ? api.SaveDeviceType : api.SavePartType
				post(url, {
					typeName: val
				}).then(res => {
					this.resetData()
					this.current == 0 ? this.queryDeviceList() : this.queryPartList()
				})
			},
		}
	}
</script>

<style lang="scss">
	@import '@/static/css/ProductType.css';
</style>
